<script setup>
import { ref, onMounted } from 'vue'
import { ElCarousel, ElCarouselItem, ElEmpty, ElMessage } from 'element-plus'
import axios from 'axios'
import PromotListView from './PromotListView.vue';
const carouselList = ref([])
const loading = ref(false)

const getCarouselData = async () => {
  try {
    loading.value = true
    const response = await axios.get('http://localhost:8080/carouse')
    if (response.data && response.data.code === 200) {
      carouselList.value = response.data.data || []
      if (carouselList.value.length === 0) {
        ElMessage.info('暂无轮播图数据')
      }
    } else {
      ElMessage.warning('获取轮播图数据失败')
    }
  } catch (error) {
    ElMessage.error('轮播图加载失败，请稍后重试')
    console.error('轮播数据请求错误:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getCarouselData()
})
</script>
<template>
  <el-carousel 
    :interval="4000" 
    type="card" 
    height="300px"
    v-loading="loading"
    element-loading-text="轮播图加载中..."
  >
    <el-carousel-item v-for="item in carouselList" :key="item.id">
      <img 
        :src="item.imgUrl" 
        :alt="item.title" 
        class="carousel-img"
        @error="handleImageError"

      >
      <h3 class="medium">{{ item.title }}</h3>
    </el-carousel-item>
    
    <template #empty>
      <el-empty description="暂无轮播图数据"></el-empty>
    </template>
  </el-carousel>
  <PromotListView></PromotListView>
</template>
<style scoped>
.carousel-container {
  width: 100%;
  height: 300px;
}
.carousel-img-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 8px;
  display: block;
}

.medium {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  font-size: 18px;
}

</style>